<template>
<!-- 首页 -->
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img v-lazy="item.src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="navbar">
      <div
        v-for="item in gird"
        :key="item.id"
        class="nav_item"
        @click="jumpRoute(item.path)"
      >
        <img :src="item.src" alt="" />
        <span>{{ item.title }}</span>
      </div>
    </div>
    <div class="message">
      <div class="news">
        <img
          src="../../assets/平台功能.0942ecad.png"
          alt=""
          @click="
            () => {
              this.$router.push('/ptjs');
            }
          "
        />
        <img
          src="../../assets/首页-积分规则.png"
          alt=""
          @click="
            () => {
              this.$router.push('/jfgz');
            }
          "
        />
      </div>
      <div class="hot-news">
        <span class="hot-news-title-left">热门新闻</span>
        <router-link class="hot-news-title-right" to="/gdxx"
          >更多 &gt;</router-link
        >
      </div>
      <div class="news_list">
        <van-list>
          <van-cell class="item" v-for="item in list" :key="item.id">
            <div class="list">
              <div class="_left"><img :src="item.src" alt=""/></div>
              <div class="_right" @click="details(item.id)">
                <p v-if="item.data.title.length > count">
                  {{ item.data.title.substr(0, count - 1) + "..." }}
                </p>
                <p v-else>{{ item.data.title }}</p>
                <p>发布时间:{{ item.data.time }}</p>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
      <div></div>
    </div>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "./Tabbar";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      count: "",
      banner: [
        { id: 1, src: require("../../assets/首页-海报.png") },
        { id: 2, src: require("../../assets/问卷调查-海报.png") },
      ],
      gird: [
        {
          id: 1,
          src: require("../../assets/首页-活动报名.png"),
          title: "活动报名",
          path: "/baoming",
        },
        {
          id: 2,
          src: require("../../assets/首页-场地预约.png"),
          title: "场地预约",
          path: "/yuyue",
        },
        {
          id: 4,
          src: require("../../assets/首页-讨论墙.png"),
          title: "讨论墙",
          path: "/taolun",
        },
        {
          id: 3,
          src: require("../../assets/首页-资源下载.png"),
          title: "资源下载",
          path: "/xiazai",
        },
        {
          id: 5,
          src: require("../../assets/首页-教学咨询.png"),
          title: "教师咨询",
          path: "/zixun",
        },
        {
          id: 6,
          src: require("../../assets/首页-微课视频.png"),
          title: "微课视频",
          path: "/weike",
        },
        {
          id: 7,
          src: require("../../assets/首页-审核.png"),
          title: "审核中心",
          path: "/shenhe",
        },
        {
          id: 8,
          src: require("../../assets/首页-在线学习.png"),
          title: "在线学习",
          path: "/online",
        },
        {
          id: 9,
          src: require("../../assets/调查问卷mdpi.png"),
          title: "调查问卷",
          path: "/diaocha",
        },
        {
          id: 10,
          src: require("../../assets/首页-在线报修.png"),
          title: "设备保修",
          path: "/shebei",
        },
      ],
      list: [
        {
          id: this.$nanoid(),
          src: require("../../assets/20201230181910809.jpg"),
          data: {
            title:
              "教师发展中心开展“学党史 悟初心 办实事”专项实践活动暨2021年培训项目论证会",
            time: "2021-05-21",
          },
        },
        {
          id: this.$nanoid(),
          src: require("../../assets/20201230181910809.jpg"),
          data: {
            title: "教师发展中心召开2021年培训项目论证会",
            time: "2021-05-22",
          },
        },
        {
          id: this.$nanoid(),
          src: require("../../assets/20201230181910809.jpg"),
          data: {
            title:
              "教师发展中心开展“学党史 悟初心 办实事”专项实践活动暨2021年培训项目论证会",
            time: "2021-05-21",
          },
        },
        {
          id: this.$nanoid(),
          src: require("../../assets/20201230181910809.jpg"),
          data: {
            title: "教师发展中心召开2021年培训项目论证会",
            time: "2021-05-22",
          },
        },
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    jumpRoute(path) {
      console.log(path);
      // this.$router.push(path)
    },
    details(id) {
      console.log(id);
      this.$router.push(`/details:${id}`);
    },
  },
  mounted() {
    this.count = Math.ceil((document.body.clientWidth - 80) / 15);
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  // height: calc(100% - 50px);
  // overflow-y: auto;
  padding-bottom: 50px;
  box-sizing: border-box;
  .my-swipe {
    margin: 12px 16px;
    border-radius: 10px;
    .van-swipe-item {
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .navbar {
    margin: 12px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .nav_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      width: 20%;
      img {
        width: 36px;
        height: 36px;
      }
      span {
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
  .message {
    background-color: #f5f7fa;
    .news {
      padding: 15px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 49%;
      }
    }
    .hot-news {
      padding: 16px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .hot-news-title-left {
        color: #2a2c34;
        font-size: 17px;
        font-weight: 700;
      }
      .hot-news-title-right {
        margin-right: 5px;
        color: #9598a2;
        font-size: 12px;
      }
    }
    .news_list {
      padding: 0 8px;
      .van-list {
        .item {
          .list {
            display: flex;
            align-items: center;
            ._left {
              margin-right: 15px;
              img {
                width: 48px;
                height: 48px;
              }
            }
            ._right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              p:last-child {
                font-size: 12px;
                color: #9598a2;
              }
            }
          }
        }
      }
    }
  }
}
</style>